<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="style/fjol_style.css" rel="stylesheet" />
	</head>

	<body>
			<!--房屋筛选tab选项卡-->
			<header class="fj-house-tab rel">
				<div class="mui-segmented-control">
		          <a class="mui-control-item item1">区域<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item2">售价<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item3">房型<b class="down-triangle ml2"></b></a>
		          <a class="mui-control-item item4"><i class="subscriber-icon vm"></i><span class="vm">订阅</span></a>
		      </div>
		      <div class="fj-house-tab-div abs">
		      	<ul class="mui-table-view mui-hidden" id="item1">
		      	        <li class="mui-table-view-cell">
		      	            <a class="">
		      	                Item 1
		      	            </a>
		      	        </li>
		      	        <li class="mui-table-view-cell">
		      	            <a class="">
		      	                 Item 1
		      	            </a>
		      	        </li>
		      	        <li class="mui-table-view-cell">
		      	            <a class="">
		      	                 Item 1
		      	            </a>
		      	        </li>
		      	    </ul>
		      	    <ul class="mui-table-view mui-hidden" id="item2">
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                    Item 2
		      	                </a>
		      	            </li>
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                     Item 2
		      	                </a>
		      	            </li>
		      	            <li class="mui-table-view-cell">
		      	                <a class="">
		      	                     Item 2
		      	                </a>
		      	            </li>
		      	       </ul>
		      	        <ul class="mui-table-view mui-hidden" id="item3">
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                        Item 3
		      	                    </a>
		      	                </li>
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                         Item 3
		      	                    </a>
		      	                </li>
		      	                <li class="mui-table-view-cell">
		      	                    <a class="">
		      	                         Item 3
		      	                    </a>
		      	                </li>
		      	           </ul>
		      </div>
			</header>

		<script src="js/mui.min.js"></script>
		<!--<script src="js/fj_public_js.js"></script>-->
		<script type="text/javascript">
			//启用双击监听
			mui.init({
			gestureConfig:{
				doubletap:true
			},
			subpages:[{ 
				url:'fj_house_sub.html',
				id:'house_list_sub',
				styles:{
					top: '40px',
					bottom: '0px'
				}
			}] 
		});

			var contentWebview = null;
		document.querySelector('header').addEventListener('doubletap',function () {
			if(contentWebview==null){
				contentWebview = plus.webview.currentWebview().children()[0];
			}
			contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
		});
		
		//js获取兄弟节点
function sibling( elem ) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
 
return r;
}




//房屋列表的tab切换效果
function tab_tap(ObjId){
	var tabUl = document.querySelector(ObjId);
	var tabClassName = tabUl.className.split(' ');
	//重复点击自身显示与隐藏
	if(tabClassName.length==2){
		tabUl.classList.remove('mui-hidden');
	}else{
		tabUl.classList.add('mui-hidden');
	}
	
	//兄弟节点的隐藏
	var tabSiblings = sibling(tabUl);
	//	console.log(tabSiblings.length);
	
	for (var i=0; i<tabSiblings.length; i++) {
		tabSiblings[i].classList.add('mui-hidden');
	}

}
			
		//区域点击tab效果
		(function(){
			document.querySelector('.item1').addEventListener('tap',function(){
				tab_tap('#item1');
			});
			document.querySelector('.item2').addEventListener('tap',function(){
				tab_tap('#item2');
			});
			document.querySelector('.item3').addEventListener('tap',function(){
				tab_tap('#item3');
			});
			document.querySelector('.item4').addEventListener('tap',function(){
				mui.openWindow({
					url:'fj_subscribe.html'
					});
			});
		})(mui);
		
		</script>
	</body>

</html>